<template>
<div style="background-color: #c7c7c7;">
    <x-header :left-options="{showBack: false}">树洞</x-header>
    <flexbox orient="vertical">

    <flexbox-item v-for="(Hollow, index) in Hollowlist" :key="index">
    <div class="flex-demo">
    <div>

    <div class="namebox">
    <div class="namemsg">
    <img class="touxiang" src="static/img/sd.png" alt="">
    <div class="Tname">
    <span class="name">{{Hollow.Nick_name}}</span>
    <span class="time">{{Hollow.Sd_time}}</span>  
    </div>  
    </div>
    </div>
    <p class="Title">{{Hollow.Sd_text}}</p>
    <span class="Type">#树洞</span>

    <div class="Tclick">
    <router-link class="rline" :to="'/Hollowdetails/' + id +'/'+ Hollow._id">
    <div class="Tmsg">
    <img slot="icon" src="static/img/msg.png" width="20">
    <p>{{Hollow.Pl_msg.length==0? '评论':Hollow.Pl_msg.length}}</p>
    </div>
    </router-link>
    <div class="Tunlike">
    <img v-if="Hollow.Sd_likeuser[0]=='false'" slot="icon" src="static/img/bao.png" width="20" @click="Clicked(Hollow)">
    <img v-if="Hollow.Sd_likeuser[0]=='true'" slot="icon" src="static/img/bao1.png" width="20" @click="Clicked(Hollow)">
    <p>{{Hollow.Sd_like}}</p>
    </div>
    </div>

    </div>
    </div>
    </flexbox-item>



    </flexbox>
    <br><br><br>
  </div>
</template>
<script>
import { TransferDom } from 'vux'
import { AlertModule} from 'vux'
export default {
    directives: {
    TransferDom
    },
    data () {
    return {
      Hollowlist:[],   
      id:this.$store.state.wd.wdid, 
      Nick_name:'',
    }
    },
    methods: {
      GET(){//获取所有树洞
            var that = this;
            that.$http.post("http://localhost:3000/sd/getsd",
            {
            User_id:this.$store.state.wd.wdid,
            },{emulateJSON: true})
            .then(
            (response)=>{
            that.Hollowlist = response.data.msg.sds;
            console.log(that.Hollowlist);
            },
            (error)=>{
                console.log("err");
            });
            },
      Clicked(x){//点赞
        if(x.Sd_likeuser[0]=='false'){
        x.Sd_like++,
        this.$http.post("http://localhost:3000/sd/sddz",
            {
            Sd_id:x._id,
            User_id:this.$store.state.wd.wdid,
            like:x.Sd_likeuser[0],
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Sd_likeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '抱抱',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Sd_likeuser[0]=='true'){
        x.Sd_like--,
        this.$http.post("http://localhost:3000/sd/sddz",
            {
            Sd_id:x._id,
            User_id:this.$store.state.wd.wdid,
            like:x.Sd_likeuser[0],
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Sd_likeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消抱',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
      },
      S_nick(){//修改昵称
        const _this = this
        this.$vux.confirm.prompt('最多10个字', {
        title: '输入你的花名',
        closeOnConfirm:false,
        onShow () {
          _this.$vux.confirm.setInputValue(_this.Nick_name)
        },
        onConfirm (msg) {
        if(msg.length>10){
        _this.$vux.toast.show({
        type: 'text',
        text: '最多10个字!',
        position: 'middle',
        time: '1000',
        })
        }
        else if(msg==''){
        _this.$vux.confirm.hide();
        _this.$store.state.wd.wdnick='树洞'
        }
        else{
          _this.$vux.confirm.hide();
          _this.$store.state.wd.wdnick=msg
        }
        }
      })
      },
    },
    mounted(){
        this.GET();
        if(!this.$store.state.wd.wdnick){
        this.S_nick()}
    },
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
.rline{
text-decoration:none;  /*超链接无下划线*/
color: #000;
}
.flex-demo {//帖子css
  width: 100%;
  background-color: #f8f6f6;
  border-radius: 4px;
  background-clip: padding-box;

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}
.namebox{
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.namemsg{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 70%;
}
.Tname{
  display: flex;
  flex-direction: column;
}
.touxiang{
    background-color: aliceblue;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.name{
  margin-bottom: 5px;
  width: 200px;
  color: rgb(59, 59, 59);
  font-size: 14px;
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden;
}
.time{
  color: rgb(88, 88, 88);
  font-size: 12px;
}
.gz{
  margin-right: 20px;
  white-space:nowrap; 
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;

}
.Tclick{
  display: flex;
  align-items:center;
  justify-content:space-around;
  margin-bottom: 10px;
  margin-top: 10px;
}
.Tmsg{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tunlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}


.Title{
margin: 20px;
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
.Timg{
margin-left: 10%;
width: 80%;
margin-top: 10px;
}
.Type{
    margin-left: 20px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #008CBA;
    border: 2px solid #008CBA;
    border-radius: 5px;
}
</style>